import 'package:flutter/material.dart';

class HelpCenterScreen extends StatelessWidget {
  const HelpCenterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF8F9FA),
      appBar: AppBar(
        title: const Text('帮助中心'),
        backgroundColor: Colors.white,
        foregroundColor: const Color(0xFF333333),
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, size: 16),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.search, size: 20),
            onPressed: () {
              // 搜索功能
            },
          ),
        ],
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          // 联系客服卡片
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: const Color(0xFF1890FF),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Row(
              children: [
                const Icon(
                  Icons.headset_mic,
                  color: Colors.white,
                  size: 24,
                ),
                const SizedBox(width: 12),
                const Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '在线客服',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Text(
                        '7×24小时为您服务',
                        style: TextStyle(
                          color: Color(0xFFE6F7FF),
                          fontSize: 12,
                        ),
                      ),
                    ],
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    // 联系客服
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.white,
                    foregroundColor: const Color(0xFF1890FF),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                  ),
                  child: const Text('联系客服'),
                ),
              ],
            ),
          ),
          const SizedBox(height: 20),
          
          // 常见问题
          const Text(
            '常见问题',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Color(0xFF333333),
            ),
          ),
          const SizedBox(height: 12),
          
          _buildHelpCategory(
            title: '账户相关',
            icon: Icons.account_circle,
            iconColor: const Color(0xFF1890FF),
            questions: [
              '如何注册账户？',
              '如何进行实名认证？',
              '忘记密码怎么办？',
              '如何修改个人信息？',
            ],
          ),
          const SizedBox(height: 16),
          
          _buildHelpCategory(
            title: 'NFT交易',
            icon: Icons.swap_horiz,
            iconColor: const Color(0xFF52C41A),
            questions: [
              '如何购买NFT？',
              '如何出售NFT？',
              '交易手续费是多少？',
              '交易失败怎么办？',
            ],
          ),
          const SizedBox(height: 16),
          
          _buildHelpCategory(
            title: '收藏管理',
            icon: Icons.collections,
            iconColor: const Color(0xFFF5222D),
            questions: [
              '如何查看我的收藏？',
              '如何转赠NFT？',
              '收藏品丢失怎么办？',
              '如何备份收藏？',
            ],
          ),
          const SizedBox(height: 16),
          
          _buildHelpCategory(
            title: '安全保障',
            icon: Icons.security,
            iconColor: const Color(0xFF722ED1),
            questions: [
              '如何保护账户安全？',
              '发现异常登录怎么办？',
              '如何设置双重验证？',
              '资产安全保障机制',
            ],
          ),
          const SizedBox(height: 20),
          
          // 意见反馈
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
              boxShadow: const [
                BoxShadow(
                  color: Color(0x1A000000),
                  blurRadius: 8,
                  offset: Offset(0, 2),
                ),
              ],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Row(
                  children: [
                    Icon(
                      Icons.feedback,
                      color: Color(0xFFFAAD14),
                      size: 20,
                    ),
                    SizedBox(width: 8),
                    Text(
                      '意见反馈',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                        color: Color(0xFF333333),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 8),
                const Text(
                  '您的建议是我们改进的动力',
                  style: TextStyle(
                    fontSize: 14,
                    color: Color(0xFF666666),
                  ),
                ),
                const SizedBox(height: 12),
                SizedBox(
                  width: double.infinity,
                  child: ElevatedButton(
                    onPressed: () {
                      // 意见反馈
                    },
                    style: ElevatedButton.styleFrom(
                      backgroundColor: const Color(0xFF1890FF),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    child: const Text('提交反馈'),
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 20),
          
          // 联系方式
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
              boxShadow: const [
                BoxShadow(
                  color: Color(0x1A000000),
                  blurRadius: 8,
                  offset: Offset(0, 2),
                ),
              ],
            ),
            child: const Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '联系我们',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF333333),
                  ),
                ),
                SizedBox(height: 12),
                Row(
                  children: [
                    Icon(
                      Icons.email,
                      color: Color(0xFF666666),
                      size: 16,
                    ),
                    SizedBox(width: 8),
                    Text(
                      '邮箱：support@hrc.com',
                      style: TextStyle(
                        fontSize: 14,
                        color: Color(0xFF666666),
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 8),
                Row(
                  children: [
                    Icon(
                      Icons.phone,
                      color: Color(0xFF666666),
                      size: 16,
                    ),
                    SizedBox(width: 8),
                    Text(
                      '客服热线：400-888-8888',
                      style: TextStyle(
                        fontSize: 14,
                        color: Color(0xFF666666),
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 8),
                Row(
                  children: [
                    Icon(
                      Icons.access_time,
                      color: Color(0xFF666666),
                      size: 16,
                    ),
                    SizedBox(width: 8),
                    Text(
                      '服务时间：9:00-21:00',
                      style: TextStyle(
                        fontSize: 14,
                        color: Color(0xFF666666),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildHelpCategory({
    required String title,
    required IconData icon,
    required Color iconColor,
    required List<String> questions,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: const [
          BoxShadow(
            color: Color(0x1A000000),
            blurRadius: 8,
            offset: Offset(0, 2),
          ),
        ],
      ),
      child: ExpansionTile(
        leading: Container(
          width: 32,
          height: 32,
          decoration: BoxDecoration(
            color: iconColor.withOpacity(0.1),
            borderRadius: BorderRadius.circular(16),
          ),
          child: Icon(
            icon,
            color: iconColor,
            size: 18,
          ),
        ),
        title: Text(
          title,
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
            color: Color(0xFF333333),
          ),
        ),
        children: questions.map((question) {
          return ListTile(
            title: Text(
              question,
              style: const TextStyle(
                fontSize: 14,
                color: Color(0xFF666666),
              ),
            ),
            trailing: const Icon(
              Icons.arrow_forward_ios,
              size: 12,
              color: Color(0xFF999999),
            ),
            onTap: () {
              // 跳转到具体问题页面
            },
          );
        }).toList(),
      ),
    );
  }
}